<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head th:include="base/include/mainPageHead"></head>
<body>
	<!-- Fixed navbar -->
	<div id="head-nav" class="navbar navbar-default navbar-fixed-top">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse"
					data-target=".navbar-collapse">
					<span class="fa fa-gear"></span>
				</button>
				<a class="navbar-brand" href="#"> <!-- <span>BOZHON</span> -->
				</a>
			</div>
			<div class="navbar-collapse collapse">
				<!-- ============================================================================= -->
				<!-- 这里是常用菜单栏目 -->
				<!-- ============================================================================= -->
				<ul class="nav navbar-nav">
					<li id="mypage" class="active"><a
						href="javascript:openpage('mypage/index.htm')">我的主页</a></li>
					<li id="common_1"><a id="common">功能</a></li>
					<li class="dropdown"><a href="#" class="dropdown-toggle"
						data-toggle="dropdown">设置 <b class="caret"></b></a>
						<ul class="dropdown-menu">
							<!-- 		              <li><a href="#">Action</a></li>
		              <li><a href="#">Another action</a></li> -->
							<li class="dropdown-submenu"><a href="#">系统模块</a>
								<ul class="dropdown-menu"
									th:if="${not #lists.isEmpty(systemModels)}">
									<li th:each="systemModel : ${systemModels}"><a
										th:href="'mainPage.htm?systemId='+${systemModel.id}"
										th:text="${systemModel.systemName}">苏州博众精工科技有限公司</a></li>
								</ul></li>
							<li class="dropdown-submenu"><a href="#">设置所在公司</a>
								<ul class="dropdown-menu" th:if="${not #lists.isEmpty(company)}">
									<li th:each="cp : ${company}"><a
										th:href="'mainPage.htm?companyId='+${cp.id}"
										th:text="${cp.companyName}">苏州博众精工科技有限公司</a></li>
								</ul></li>
						</ul></li>
					<!-- 	          <li class="dropdown">
	            <a href="#" class="dropdown-toggle" data-toggle="dropdown">模块<b class="caret"></b></a>
			      <ul class="dropdown-menu col-menu-2">
			        <li class="col-sm-6 no-padding">
			          <ul>
			          <li class="dropdown-header"><i class="fa fa-group"></i>Users</li>
			          <li><a href="#">Action</a></li>
			          <li><a href="#">Another action</a></li>
			          <li><a href="#">Something else here</a></li>
			          <li class="dropdown-header"><i class="fa fa-gear"></i>Config</li>
			          <li><a href="#">Action</a></li>
			          <li><a href="#">Another action</a></li>
			          <li><a href="#">Something else here</a></li> 
			          </ul>
			        </li>
			        <li  class="col-sm-6 no-padding">
			          <ul>
			          <li class="dropdown-header"><i class="fa fa-legal"></i>Sales</li>
			          <li><a href="#">New sale</a></li>
			          <li><a href="#">Register a product</a></li>
			          <li><a href="#">Register a client</a></li> 
			          <li><a href="#">Month sales</a></li>
			          <li><a href="#">Delivered orders</a></li>
			          </ul>
			        </li>
			      </ul>
	          </li> -->
				</ul>
				<!-- ============================================================================= -->
				<!-- 这里是常用菜单栏目 -->
				<!-- ============================================================================= -->

				<!-- ============================================================================= -->
				<!-- 这里是个人信息栏目 -->
				<!-- ============================================================================= -->
				<ul class="nav navbar-nav navbar-right user-nav">
					<li class="dropdown profile_menu"><a href="#"
						class="dropdown-toggle" data-toggle="dropdown"> <img
							alt="Avatar" class="right-avatar"
							th:src="${headPic}" /> <span
							th:text="${userName}">姓名</span> <b class="caret"></b>
					</a>
						<ul class="dropdown-menu">
							<!-- 	          <li><a href="#">My Account</a></li>
	          <li><a href="#">Profile</a></li>
	          <li><a href="#">Messages</a></li>
	          <li class="divider"></li> -->
							<li><a data-target="#edit" data-toggle="modal"
								id="login-btn">编辑头像</a></li>
							<li class="divider"></li>
							<li><a th:href="@{logout}">登出</a></li>
						</ul></li>
				</ul>
				<!-- ============================================================================= -->
				<!-- 这里是个人信息栏目 -->
				<!-- ============================================================================= -->

				<!-- ============================================================================= -->
				<!-- 三个图标栏目 -->
				<!-- ============================================================================= -->
				<ul class="nav navbar-nav navbar-right not-nav">
					<!-- 	      <li class="button dropdown">
	        <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"><i class=" fa fa-comments"></i></a>
	        <ul class="dropdown-menu messages">
	          <li>
	            <div class="nano nscroller">
	              <div class="content">
	                <ul>
	                  <li>
	                    <a href="#">
	                      <img src="images/avatar2.jpg" alt="avatar" /><span class="date pull-right">13 Sept.</span> <span class="name">Daniel</span> I'm following you, and I want your money! 
	                    </a>
	                  </li>
	                  <li>
	                    <a href="#">
	                      <img src="images/avatar_50.jpg" alt="avatar" /><span class="date pull-right">20 Oct.</span><span class="name">Adam</span> is now following you 
	                    </a>
	                  </li>
	                  <li>
	                    <a href="#">
	                      <img src="images/avatar4_50.jpg" alt="avatar" /><span class="date pull-right">2 Nov.</span><span class="name">Michael</span> is now following you 
	                    </a>
	                  </li>
	                  <li>
	                    <a href="#">
	                      <img src="images/avatar3_50.jpg" alt="avatar" /><span class="date pull-right">2 Nov.</span><span class="name">Lucy</span> is now following you 
	                    </a>
	                  </li>
	                </ul>
	              </div>
	            </div>
	            <ul class="foot"><li><a href="#">View all messages </a></li></ul>           
	          </li>
	        </ul>
	      </li> -->

					<li class="button dropdown"><a href="javascript:;"
						class="dropdown-toggle" data-toggle="dropdown"><i
							class="fa fa-globe"></i><span class="bubble">2</span></a>
						<ul class="dropdown-menu">
							<li>
								<div class="nano nscroller">
									<div class="content">
										<ul>
											<li><a href="#"><i class="fa fa-cloud-upload info"></i><b>Daniel</b>
													is now following you <span class="date">2 minutes
														ago.</span></a></li>
											<li><a href="#"><i class="fa fa-male success"></i> <b>Michael</b>
													is now following you <span class="date">15 minutes
														ago.</span></a></li>
											<li><a href="#"><i class="fa fa-bug warning"></i> <b>Mia</b>
													commented on post <span class="date">30 minutes ago.</span></a></li>
											<li><a href="#"><i class="fa fa-credit-card danger"></i>
													<b>Andrew</b> killed someone <span class="date">1
														hour ago.</span></a></li>
										</ul>
									</div>
								</div>
								<ul class="foot">
									<li><a href="#">View all activity </a></li>
								</ul>
							</li>
						</ul></li>


					<!-- <li class="button"><a href="javascript:;" class="speech-button"><i class="fa fa-microphone"></i></a></li>	 -->
				</ul>
				<!-- ============================================================================= -->
				<!-- 三个图标栏目 -->
				<!-- ============================================================================= -->
			</div>
		</div>
	</div>

	<div id="cl-wrapper" class="fixed-menu">
		<div class="cl-sidebar" data-position="right" data-step="1"
			data-intro="Fixed Sidebar It adjust to your needs.">
			<div class="cl-toggle">
				<i class="fa fa-bars"></i>
			</div>
			<div class="cl-navblock">
				<div class="menu-space">
					<div class="content" id="main">
						<!-- 		          	<div style="padding:8px;border:1px solid #ffcc00;background:#ffcc00" >
		          		<span>公司：</span>
		          		<span th:text="${companyName}"></span>
		          	</div> -->
						<!-- ============================================================================= -->
						<!-- ==================================头像 start================================== -->
						<!-- ============================================================================= -->
						<div class="side-user">
							<div class="col-md-5 column">
								<img alt="Avatar" class="left-avatar" id="myHead"
									th:src="${headPic}" />
							</div>
							<div class="col-md-6 column">
								<p>
								<div th:text="${userName}">姓名</div>
								<div th:text="${postName}">岗位</div>
								<div th:text="${companyName}">公司</div>
								</p>
							</div>
						</div>

						<!-- ============================================================================= -->
						<!-- ==================================头像 end================================== -->
						<!-- ============================================================================= -->

						<!-- ============================================================================= -->
						<!-- ==================================搜索 start================================== -->
						<!-- ============================================================================= -->
						<form id="main-search-menu">
							<div class="text-right search-button">
								<input type="text" id="search" class="form-control search"
									placeholder="菜单搜索..." autocomplete="off" />
							</div>
							<!-- 渲染 -->
							<ul class="search-result " id="search-result">
							</ul>
							<!-- /渲染 -->
						</form>
						<!-- ============================================================================= -->
						<!-- ==================================搜索 end================================== -->
						<!-- ============================================================================= -->

						<!-- ============================================================================= -->
						<!-- ==================================菜单 start================================== -->
						<!-- ============================================================================= -->

						<ul class="cl-vnavigation" id="cl-vnavigation">
							<li th:each="menu : ${menus}"><a class="inactive"><i
									th:class="${menu.menu.menuIcon}"></i><span
									th:id="${menu.menu.id}" class="m"
									th:text="${menu.menu.menuName}">一级菜单名称</span></a>
								<ul class="sub-menu " th:if="${not #lists.isEmpty(menu.sun)}">
									<li th:each="second : ${menu.sun}"><a class="inactive "><span
											th:id="${second.menu.id}" class="m"
											th:text="${second.menu.menuName}">二级菜单</span> <!-- <span class="label label-n pull-right">8</span> --></a>
										<ul class="sub-menu-3"
											th:if="${not #lists.isEmpty(second.sun)}">
											<li th:each="thread : ${second.sun}"><a
												th:href="'javascript:openpage(\''+${basePath}+'/'+ ${ thread.menu.menuLink}+'\',\'' + ${ thread.menu.menuName}+'\')'"><span
													th:id="${thread.menu.id}" class="m"
													th:text="${thread.menu.menuName}">三级菜单</span></a></li>
										</ul></li>
								</ul></li>
						</ul>
						<!-- ============================================================================= -->
						<!-- ==================================菜单 end==================================== -->
						<!-- ============================================================================= -->
					</div>
				</div>
			</div>
		</div>
		<iframe id="myIframe" th:src="@{/mypage/index.htm}"
			style="width: 100%; height: 100%;" frameborder="no" border="0"></iframe>
	</div>

	<!-- /. 修改头像的弹窗页面 -->
	<div class="modal fade" id="edit" tabindex="-1" role="dialog">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title text-center form-title"><b><i class="fa fa-camera"></i>--修改头像</b></h4>
				</div>
				<div class="modal-body">
					<div class="alert alert-danger" id="warning" style="display: none;"></div>
					<table style="border: 2px solid #fff; text-align: center;">
						<tbody>
							<tr>
								<td>
									<canvas id="myCanvas" width="100" height="100"
										style="border: 2px solid #000;"> </canvas>
								</td>
								<td><img id="headpic_1" alt="Avatar" class="right-avatar"
									th:src="@{/static/mainpage/images/headpic.jpg}"
									style="border: 2px solid #000;" /></td>
								<td><img id="headpic_2" alt="Avatar" class="left-avatar"
									th:src="@{/static/mainpage/images/headpic.jpg}"
									style="border: 2px solid #000;" /></td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="modal-footer">
					<a href="javascript:;" class="btn a-upload">
						<form th:action="@{/file/uploadFile}" method="post"
							target="headpicFrame" enctype="multipart/form-data" id="imgFrom">
							<input id="post_file" type="file" name="file" /><i class="fa fa-camera"></i>选择图片
							<input type="hidden" name="methodName"  value="common" />
							<input type="hidden" name="fileName"  th:value="${userAccount + userName}" />
							<input type="hidden" name="flag"  value="headPic" />
							<input type="hidden" name="relationId"  th:value="${relationId}" />
							<input type="hidden" name="tableName"  value="TB_USER" />
						</form>
					</a>
					<iframe id="headpicFrame" name="headpicFrame"
						style="display: none;"></iframe>
					<button type="button" class="btn btn-warning"
						onclick="uploadFile()">确认</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->
	<style>
.a-upload {
	padding: 4px 10px;
	height: 30px;
	line-height: 20px;
	position: relative;
	cursor: pointer;
	color: #888;
	background: #fafafa;
	border: 1px solid #ddd;
	border-radius: 4px;
	overflow: hidden;
	display: inline-block;
	*display: inline;
	*zoom: 1
}

.a-upload  input {
	position: absolute;
	font-size: 100px;
	right: 0;
	top: 0;
	opacity: 0;
	filter: alpha(opacity = 0);
	cursor: pointer
}

.a-upload:hover {
	color: #444;
	background: #eee;
	border-color: #ccc;
	text-decoration: none
}
</style>
</body>
<script type="text/javascript"
	th:src="@{/static/mainpage/js/jquery.JPlaceholder.js}"></script>
<script type="text/javascript"
	th:src="@{/static/mainpage/js/jquery.nanoscroller/jquery.nanoscroller.js}"></script>
<script type="text/javascript"
	th:src="@{/static/mainpage/js/behaviour/general3.js}"></script>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript">
	$(document).ready(function() {
		//initialize the javascript
		App.init({
		// nanoScroller: true
		});
	});
</script>
<script type="text/javascript"
	th:src="@{/static/mainpage/js/bootstrap/dist/js/bootstrap.min.js}"></script>
<script type="text/javascript"
	th:src="@{/static/mainpage/js/dropzone/dropzone.js}"></script>
<!--[if lte IE 9]>
   <script th:src="@{/static/mainpage/js/behaviour/fixie.js}"></script>
<![endif]-->
<script type="text/javascript">
	/*<![CDATA[*/
	$(function(){
		var t = document.getElementById("myCanvas");
		var createCanvas = t.getContext("2d");
		var img = new Image();
		img.src = $("#myHead").attr("src");
		img.onload = function() {
			createCanvas.drawImage(img, 0, 0, 100, 100);//没用直接插入背景图片而用canvas绘制图片，是为了调整所需框内图片的大小
		};
	});
	           
	function openpage(url, name) {
		if (name == undefined) {
			$("#mypage").addClass("active");
			$("#common_1").removeClass("active");
		} else {
			$("#common_1").addClass("active");
			$("#common").text(name);
			$("#mypage").removeClass("active");
		}
		myIframe.src = url;
	}

	document.getElementById('post_file').onchange = function() {
		var file = this.files[0];
		console.log(file);
		//这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件 
		if (!/image\/\w+/.test(file.type)) {
			alert("请确保文件为图像类型!");
			return false;
		}
		var reader = new FileReader();
		reader.readAsDataURL(file);
		reader.onload = function(e) {
			paintImage(e.target.result);
		}
	}

	function paintImage(url) {
		var t = document.getElementById("myCanvas");
		var createCanvas = t.getContext("2d");
		var img = new Image();
		img.src = url;
		img.onload = function() {
			createCanvas.drawImage(img, 0, 0, 100, 100);//没用直接插入背景图片而用canvas绘制图片，是为了调整所需框内图片的大小
		};
		$("#headpic_1").attr('src', url);
		$("#headpic_2").attr('src', url);
	}

	function uploadFile() {
		$("#imgFrom").submit();
	}

	function uplaodFilecallback(code, msg) {
		if (code == '50') {
			$("#warning").css('display', '');
			$("#warning").html(msg);
		} else {
			window.location.reload();
		}
	}
	/*]]>*/
</script>
</html>